<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="m.css" rype="text/css">
    <style>
        p.pos_fixed{
	        position:fixed;
	        top:30px;
	        right:5px;
        }
        div.static {
            position: static;
            border: 3px solid #73AD21;
        }

        div.sticky{
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 5px;
            background-color: aqua;
            border: 3px solid #4CAF50;
        }
    </style>
</head>
<body>
    <div style="width: 500;height: 500px;">
        <div></div>
    </div>
    <p class="pos_fixed">角标</p>
    <div class="tran-time"></div>
    <p style="margin-bottom: 100px;"></p>
    <div class="translate"></div>
    <p style="border-radius: 300px;"></p>
<p class="m">公共样式</p>
<p id="qwe">1</p>
<p class="asd">2</p>
<p style="color: rgb(236, 131, 131);">内链样式</p>
<a href="https://www.taobao.com/?spm=a21bo.jianhua.201857.1.319b11d9iRTH2Y" style="text-decoration: none;">淘宝</a>
<p style="text-transform: uppercase;">This is some text</p>
<p style="text-transform: lowercase;">This is some text</p>
<p style="text-transform: capitalize;">This is some text</p>
<p style="text-indent: 30px;"></p>
<div style="height: 300px;width: 400px;overflow: scroll; padding-bottom: 200px;">
    <div class="sticky">粘性</div>
    <div class="static">111111</div>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>
<p class="tran-time"></p>
<p class="tran-time:hover"></p>
<ul>
    <li><a class="active" href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
  </ul>
<style>
    #qwe{
        border: 1px solid rgb(76, 169, 223);
    }
    .asd{
        border: 1px solid rgb(113, 113, 241);
    }
    body{
        background-image: url("D:/Pictures/Saved Pictures/微信图片_20250305084824.jpg") ;
        background-repeat: no-repeat;
        background-size: 40%;
        background-position-x: center;
    }
    li{
        text-align: center;
        border-bottom:1px solid #555;
    }
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
        width: 400px;
        background-color: #f1f1f1;
        border: 1px solid red;
    }
    li a{
        display: block;
        width: 92%;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
    }
    li a:hover {
    background-color: green;
    color: white;
    }
    li a.active {
    background-color:rgb(55, 141, 211);
    color: white;
    }
    .tran-time{
        width: 200px;
        height: 200px;
        background-color: green;
    }
    .tran-time:hover{
        width: 200px;
        height: 200px;
        transition: 5s ease;
        border-radius: 50%;
    }
    /* .translate{
    width:300px;
    height: 300px;
    background-color: red;
    position: relative;
    }
    .translate:hover {
    animation-name: example;
    animation-duration: 9s;
    animation-iteration-count: 3;
    }
    @keyframes example {
    0%{
        background-color: red;
        left:0px;
        top: 0px;
    }
    25%{
        background-color: yellow;
        left:200px;
        top: 0px;
    }
    50%{
        background-color: blue;
        left:200px;
        top: 200px;
    }
    75%{
        background-color: green;
        left:0px;
        top: 2000px;
    }
    100%{
        background-color: red;
        left:0px;
        top: 0px;
    }
    } */
</style>
</body>
</html>